<template>
  <div class="">
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">
          <span
            style="
              margin-left: -88%;
              font-size: 30px;
              font-family: '宋体';
              font-weight: bold;
            "
            >强制回单</span
          >
          <el-breadcrumb
            style="margin-left: 20px; margin-top: 8px"
            separator="/"
          >
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>报修管理</el-breadcrumb-item>
            <el-breadcrumb-item>强制回单</el-breadcrumb-item>
          </el-breadcrumb>
        </div></el-col
      >
    </el-row>

    <el-row height="20px">
      <el-col :span="24"
        ><div
          class="grid-content bg-purple-dark"
          style="
            margin-left: -90%;
            font-size: 20px;
            font-weight: bold;
            color: gray;
          "
        >
          查询条件
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple" style="margin-left: 20px">
          <el-input
            placeholder="请输入工单ID"
            v-model="pageDto.workId"
          ></el-input></div
      ></el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple" style="margin-left: 20px">
          <el-input
            placeholder="请输入报修人"
            v-model="pageDto.name"
          ></el-input></div
      ></el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple" style="margin-left: 20px">
          <el-input
            placeholder="请输入联系电话"
            v-model="pageDto.phone"
          ></el-input></div
      ></el-col>

      <el-col :span="6">
        <div
          class="grid-content bg-purple"
          style="text-align: right; margin-right: 10px"
        >
          <el-button
            type="success"
            icon="el-icon-search"
            size="small"
            @click="findPage()"
            >查询</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-refresh-left"
            size="small"
            @click="resetForm()"
            >重置</el-button
          >
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24"
        ><div
          class="grid-content bg-purple"
          style="text-align: left; margin-left: 20px; font-weight: bold"
        >
          强制回单
        </div>
      </el-col>
      <el-table :data="pagination.records" style="width: 100%">
        <el-table-column prop="workId" label="工单ID" align="center">
        </el-table-column>
        <el-table-column prop="repAdr" label="位置" align="center">
        </el-table-column>
        <el-table-column
          prop="repForm.fromName"
          label="报修内容"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="name" label="报修人" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" align="center">
        </el-table-column>
        <el-table-column prop="repTime" label="维修时间" align="center">
        </el-table-column>
        <el-table-column
          prop="workStatu"
          label="状态"
          align="center"
        ></el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="300px"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              v-if="scope.row.workStatu == '接单'"
              @click="addUI(scope.row)"
              >强制回单</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @current-change="findPage"
        :current-page="pagination.current"
        :page-sizes="[1, 5, 10, 15, 20]"
        :page-size="pagination.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </el-row>

    <!-- 强制回单 -->
    <el-dialog
      title="强制回单"
      :visible.sync="dialog"
      width="30%"
      :close-on-click-modal="false"
      :append-to-body="true"
      center
    >
      <el-button @click="photoDialog = true">照片凭证</el-button>
      <el-button @click="txtDialog = true">文字凭证</el-button>

      <!-- 照片凭证 -->
      <el-dialog
        title="照片凭证"
        :visible.sync="photoDialog"
        width="50%"
        :close-on-click-modal="false"
        :append-to-body="true"
      >
        <el-form enctype="multipart/form-data" label-width="100px">
          <el-form-item label="上传凭证:" prop="uploadFile">
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :auto-upload="false"
              action="doUpload"
              style="border: 1px dashed #e0e0e0"
              :on-change="checkType"
              accept="image/jpeg,image/png,image/jpg"
              name="headImgFile"
            >
              <img v-if="headImgUrl" :src="headImgUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="photoDialog = false">取 消</el-button>
          <el-button type="primary" @click="upload">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 文字凭证 -->
      <el-dialog
        title="文字凭证"
        :visible.sync="txtDialog"
        width="30%"
        :close-on-click-modal="false"
        :append-to-body="true"
      >
        <el-row>
          <el-col :span="5"
            ><div class="grid-content bg-purple">说明</div></el-col
          >
          <el-col :span="19"
            ><div class="grid-content bg-purple-light">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="必填,请填写说明"
                v-model="forceReceipt.evidence"
              >
              </el-input></div
          ></el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="txtDialog = false">取 消</el-button>
          <el-button type="primary" @click="addForce">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      doUpload: "http://localhost:8088/upload",
      pagination: [],
      forceReceipt: {
        workId: null,
        address: null,
        adminId: null,
        evidence: null,
      },
      dialog: false,
      photoDialog: false,
      txtDialog: false,
      pageDto: {
        pageNum: 1,
        pageSize: 10,
        workId: null,
        name: null,
        phone: null,
        status: "接单",
      },
      headImgFile: null,
      headImgUrl: null,
      repReg: {},
    };
  },
  components: {},
  methods: {
    //重置搜索条件
    resetForm() {
      this.pageDto.pageNum = 1;
      this.pageDto.pageSize = 10;
      this.pageDto.workId = null;
      this.pageDto.phone = null;
      this.pageDto.name = null;
      this.pageDto.status = "接单";
      this.findPage();
    },
    //关闭时清空repReg对象的值
    clear() {
      this.repReg = {};
    },
    //分页信息显示
    findPage() {
      console.log(this.pageDto);
      this.$axios
        .post("/leanyuan/rep-reg/findReg", this.pageDto)
        .then((resp) => {
          this.pagination = resp.data.data;
          console.log(resp.data);
        })
        .catch((ex) => {});
    },

    checkType(file, fileList) {
      console.log(file);
      let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
      fileList = [];
      if (fileType !== "jpeg" && fileType !== "jpg" && fileType !== "png") {
        this.$commonFunc.showMessage("error", "照片格式不正确");
        return false;
      }
      if (file.size / 1024 / 1024 > 1.5) {
        thisthis.$commonFunc.showMessage("error", "照片大小不能超过1.5M");
        return false;
      }
      this.headImgFile = file;
      this.headImgUrl = URL.createObjectURL(this.headImgFile.raw);
    },

    //打开修改界面
    addUI(row) {
      console.log(row);
      this.dialog = true;
      this.repReg = row;
    },
    //强制回单
    addForce() {
      this.forceReceipt.adminId = JSON.parse(
        window.sessionStorage.getItem("Authorization")
      ).id;
      this.forceReceipt.workId = this.repReg.workId;
      this.forceReceipt.address = this.repReg.repForm.fromName;
      console.log(this.forceReceipt);
      this.$axios
        .post("/leanyuan/force-receipt/addForce", this.forceReceipt)
        .then((resp) => {
          if (resp.data.status == "200") {
            //确认后跳转到详情页
            console.log(resp);
            this.$alert("强制回单成功!", "提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.dialog = false;
                this.photoDialog = false;
                this.txtDialog = false;
              },
            });
          } else {
            this.$alert("强制回单失败!");
          }
          this.findPage();
        })
        .catch((ex) => {});
    },
    upload() {
      this.forceReceipt.adminId = JSON.parse(
        window.sessionStorage.getItem("Authorization")
      ).id;
      this.forceReceipt.workId = this.repReg.workId;
      this.forceReceipt.address = this.repReg.repForm.fromName;
      console.log(this.forceReceipt);
      let formData = new FormData();
      formData.append("headImgFile", this.headImgFile.raw);
      this.$axios
        .post("/leanyuan/force-receipt/upload", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((resp) => {
          if (resp.data.status == "200") {
            //确认后跳转到详情页
            this.forceReceipt.evidence=resp.data.data
            this.addForce();
          } else {
            this.$alert("强制回单失败!");
          }
          this.findPage();
        })
        .catch((ex) => {});
    },
  },
  mounted() {
    this.findPage();
  },
};
</script>

<style  scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
  background-color: white;
  height: 80px;
}
.el-cascader {
  width: 100%;
}
.grid-content {
  border-radius: 4px;
  min-height: px;
}
.row-bg {
  padding: 10px 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar {
  width: 625px;
  height: 300px;
  display: block;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 730px;
  height: 300px;
  line-height: 300px;
  text-align: center;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
</style>
